<template>
    <div class="boox">
        <div>
            <div>
                <div class="left">
                    <img src="../assets/消息.png" alt="">
                    <p>系统通知</p>
                </div>
                <div class="red">
                    <p>2022-08-11 19:36:21</p>
                    <p>欢迎注册成为‘非遗美食网’用户，您已获赠100旺金。<br>
分享详情页，推荐用户注册您还可获100积分。成为SVIP认证用户，所推荐用户消费后还可分成！</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
.boox{
    box-sizing: border-box;
    user-select: none;
    width: 100vw;
    height: 368px;
    // background: #F9FAFB;
    // background-color: yellow;
    padding-top: 20px;
    div{
        width: 100%;
        height: 150px;
        // background-color: aqua;
        div{
            width: 870px;
            height: 100px;
            border-radius: 10px 0 0 10px;
            background-color: #fff;
            margin: 0 auto;
            box-shadow: 2px 2px 10px #909090;
            display: flex;
            .left{
                width: 100px;
                height: 100px;
                // background-color: red;
                flex-wrap:wrap;
                // margin-right: 2px;
                img{
                    width: 20px;
                    height: 20px;
                    margin: 0 auto;
                    margin-top: 25px;
                }
                p{
                    width: 100%;
                    text-align: center;
                    margin-top: -20px;
                    font-size: 14px;
                    color: #374151;
                }
            }
            .red{
                width: 770px;
                height: 100px;
                // background-color: blue;
                border-radius: 0 10px 10px 0;
                border-left: 1px solid #E5E7EB;
                display: flex;
                flex-wrap:wrap;
                box-sizing: border-box;
                padding: 20px;
                p{
                    
                    width: 770px;
                    height: 20px;
                    color:#374151;
                    font-size: 14px;
                    font-weight: 400;
                }
                p:nth-child(2){
                    margin-top: -10px;
                }
            }

        }
    }
}
</style>